<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="0"
    class="demo-ruleForm"
  >
    <el-row :gutter="10">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-form-item prop="account">
            <el-input
              ref="account"
              v-model="newAccount"
              name="account"
              placeholder="请输入账号"
              :clearable="true"
              tabindex="1"
              type="text"
              maxlength="30"
              autocomplete="new-password"
            />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-form-item prop="password">
            <el-input
              ref="password"
              v-model="newPassword"
              name="rtc_pwd"
              placeholder="请输入密码"
              :clearable="true"
              tabindex="2"
              maxlength="12"
              type="password"
              autocomplete="new-password"
              @keyup.enter.native="login"
            />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-form-item>
            <div class="grid-content bg-purple">
              <el-button
                :loading="loading"
                :disabled="!newAccount || !newPassword"
                type="primary"
                style="width:100%;"
                @click.prevent="login"
              >
                登录
              </el-button>
            </div>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { login } from '@/api/login'
import { validPhone, validEmail, validPasswrod } from '@/utils/validate'

export default {
  name : 'LoginPwd',
  components : {},
  data() {
    const validatePassword = ( rule, value, callback ) => {
      if ( !validPasswrod( value ) ) {
        callback( new Error( '密码格式错误' ) )
      } else {
        callback()
      }
    }
    const validateAccount = ( rule, value, callback ) => {
      if ( !validPhone( value ) && !validEmail( value ) ) {
        callback( new Error( '账号格式错误' ) )
      } else {
        callback()
      }
    }
    return {
      activeName : '1',
      codeSrc : '',
      baseUrl : '',
      ruleForm : {
        account : '15961917987',
        password : '123qweqwe'

        // account : '',
        // password : ''
      },
      rules : {
        account : [
          {
            required : true,
            trigger : ['blur', 'change'],
            validator : validateAccount
          }
        ],
        password : [
          {
            required : true,
            trigger : ['blur', 'change'],
            validator : validatePassword
          }
        ]
      },
      loading : false,
      redirect : undefined,
      otherQuery : {}
    }
  },
  computed : {
    newAccount : {
      get : function() {
        return this.ruleForm.account.replace( /\s/g, '' )
      },
      set : function( val ) {
        this.ruleForm.account = val.replace( /\s/g, '' )
      }
    },
    newPassword : {
      get : function() {
        return this.ruleForm.password.replace( /\s/g, '' )
      },
      set : function( val ) {
        this.ruleForm.password = val.replace( /\s/g, '' )
      }
    }
  },
  created() {},
  methods : {
    login() {
      this.$refs['ruleForm'].validate( async( valid ) => {
        if ( valid ) {
          const loginParams = {
            account : this.ruleForm.account,
            password : this.ruleForm.password
          }
          try {
            const response = await login( loginParams )
            console.log( 'response', response )
            await this.$store.dispatch(
              'user/saveToken',
              response.data.token
            )

            await this.$router.push( `/dashboard` )

          } catch (e) {

          } finally {
            this.loading = false
          }
        }
        return false
      } )
    }
  }
}
</script>

<style lang="scss" scoped>

.imgCode {
  display: inline-block;
  width: 100%;
  height: 36px;
  cursor: pointer;
  &:hover {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
